<template>
  <div style="height: 400px">
    <flexbox class="header" justify="space-between">
      <label >总条数：<span style="color: red">{{totalNum}}</span></label>
      <el-input
        v-model="searchValue"
        @keyup.enter.native="searchData"
        v-focus
        class="search-container"
        >
        <el-button
          slot="append"
          type="primary"
          icon="el-icon-search"
          @click.native="searchData"/>
      </el-input>
      <div @click="closePage"><i class="el-icon-close" style="font-size: 30px;color: #bfbdbd"></i></div>
    </flexbox>
    <div v-loading="loading" class="content">
      <ul style="" v-if="list.length">
        <li v-for="(item,index) in list" :key="index" class="list-item" @click="selectItem(item)">
          <flexbox>
            <span v-html="item.name"  class="item-name" style="">{{item.name}}</span>
          </flexbox>
          <flexbox justify="space-between">
            <flexbox-item :span="1/2">
              <span>法人代表：{{item.legalPersonName}}</span>
            </flexbox-item>
            <flexbox-item :span="1/2">
              <span>注册资本：{{item.regCapital}}</span>
            </flexbox-item>
          </flexbox>
          <flexbox>
            <span>成立日期：{{item.estiblishTime}}</span>
          </flexbox>
        </li>
      </ul>
      <flexbox
        v-else
        style="margin-top: 80px"
        v-empty="!list.length"
        xs-empty-icon="empty"
        xs-empty-text="暂无数据"
        >
      </flexbox>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  queryTianYanChaAPI
} from '@/api/customermanagement/common'
export default {
  /** 客户管理 的 客户列表  相关商机列表*/
  name: 'XhDataApi',
  components: {},
  props: {
    show: Boolean,
    /** 索引值 用于更新数据 */
    index: Number,
    data: {
      type: Object,
      default: () => {
        return {
          value: ''
        }
      }
    }
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.children[0].focus();
      }
    }
  },
  data() {
    return {
      loading: false,
      searchValue: '',
      list: [],
      totalNum: 0
    }
  },
  computed: {
    
  },
  watch: {
    data: function(newValue){
      console.log(newValue)
    }
  },
  mounted() {
    this.searchValue = this.data.value;
    this.searchData();
  },
  methods:{
    searchData() {
      if(!this.searchValue.length){
        return false
      }
      this.loading = true
      queryTianYanChaAPI({
        content: this.searchValue
      })
        .then(res => {
          this.loading = false
          if(res.data.errorCode == 0){
            this.list = res.data.result.items;
            this.totalNum = res.data.result.total;
          }
        })
        .catch(() => {
          this.loading = false
        })
    },

    selectItem(item){
      item.name = item.name.replace(/<em>/g,'').replace(/<\/em>/g,'');
      item.companyId = item.id;
      item.companyNumTyc = item.id + '';
      this.$emit('select-value',{value: item.name, businessInfo: item,index: this.index})
      this.$emit('close');
    },
    // 关闭
    closePage(){
      this.$emit('close');
    }
  }
}
</script>

<style lang="scss" scoped>

.header{
  height: 60px;
  padding: 0 10px;
  border-bottom: 1px solid #eee;
  .search-container {
    width: 300px;
  }
  .search-container /deep/ .el-input-group__append{
    color: #ffffff;
    background-color: #3E84E9;
    border-color: #3E84E9;
  }
}

.content{
  height:calc(100% - 60px);
  overflow:auto;
  .list-item{
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    &:hover{
      cursor: pointer;
      background-color: #eee;
    }
    .item-name{
      font-weight: bold;
      font-size: 15px;
      /deep/ em{
        font-style:normal;
        color: red;
      }
    }
  }
}

</style>
